import React, { Component } from "react"
import {
    Steps,
    Form,
    Button,
    message,
    Cascader,
    Input
} from "antd"
import { UserOutlined } from "@ant-design/icons"
import { advacecatetory } from "&"
import { RichEditor } from "./richeditor";
import { axios } from "&/axios"
const { Step } = Steps;
const steps = [
    { title: "基本信息", desc: "选择标题和分类" },
    { title: "意见内容", desc: "用心填写你的建议" },
    { title: "提交意见", desc: "谢谢你的建议" }
]
export default class AdviseUpdate extends Component {
    state = {
        current: 0,
        formdata: null,
        content: null,
        richkey: 1

    }

    componentDidMount(){
        axios.post("/api/getoneadvisebyid",{
            
        }).then(res=>{
            if(res.data.type){

                this.setState({
                    formdata:{
                        title:res.data.result.title,
                        category:res.data.result.category,
                    },
                    content:res.data.result.content,
                    richkey:2   // 同步 content 为了让RichEditor 重新创建一下
                })

                this.refs.updateform.setFieldsValue({
                    title:res.data.result.title,
                    category:res.data.result.category,
                })
            }
        })
    }
    next() {
        if (this.state.current < steps.length - 1) {
            if (this.state.current == 0) {
                this.refs.updateform.validateFields()
                    .then(value => {
                        this.setState({
                            current: ++this.state.current,
                            formdata: value
                        })
                    }).catch(err => {
                        message.error("请完善在操作")
                    })
            }
            if (this.state.current == 1) {
                this.setState({
                    current: ++this.state.current
                })
            }
        }
    }

    prev() {

        this.setState({
            current: --this.state.current
        });
    }
    getCategory = (value) => {

    }
    getContent = (content) => {
        this.setState({
            content
        })
    }
    handleSumitAdvise = () => {
        axios.post("/api/updateadvise", {
            content: this.state.content,
            ...this.state.formdata,
            _id: this.props.match.params.id
        }).then(res => {
            if (res.data.type) {
                this.props.history.push("/main/advise/list?from=create")
            }
        })
    }
    render() {
        const { current } = this.state;
        return (
            <div>
                <h2>请认真修改您的意见 - 为了小区美好生活</h2>
                <div style={{ marginTop: 30 }}>
                    <Steps current={current}>
                        {steps.map((item, i) => (
                            <Step key={i} title={item.title} description={item.desc} />
                        ))}
                    </Steps>
                </div>

                <div className="steps-content" style={{ marginTop: 20 }, { display: current == 0 ? "block" : "none" }}>
                    <Form
                        name="basic"
                        ref="updateform"
                        layout={{
                            labelCol: {
                                span: 4,
                            },
                            wrapperCol: {
                                span: 20,
                            },
                        }}
                        style={{ width: 300 }}
                    >
                        <Form.Item
                            label="意见标题"
                            name="title"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入',
                                }
                            ]}
                        >
                            <Input
                                prefix={<UserOutlined className="site-form-item-icon" />}
                                placeholder="请输入宝贵的意见"
                            />
                        </Form.Item>
                        <Form.Item
                            label="意见分类"
                            name="category"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择',
                                }
                            ]}
                        >
                            <Cascader

                                onChange={this.getCategory} options={advacecatetory} changeOnSelect placeholder="请选择" />
                        </Form.Item>
                    </Form>
                </div>

                <div className="steps-content" style={{ display: current == 1 ? 'block' : 'none', height: 240 }}>
                    <RichEditor
                        content={this.state.content}
                        getContent={this.getContent}
                        key={this.state.richkey}
                    />
                </div>
                <div className="steps-content" style={{ display: current == 2 ? 'block' : 'none' }}>
                </div>

                <div className="steps-action">
                    {current < steps.length - 1 && (
                        <Button type="primary" onClick={() => this.next()}>
                            下一步
                        </Button>
                    )}
                    {current === steps.length - 1 && (
                        <Button type="primary" onClick={this.handleSumitAdvise}>
                            修改意见
                        </Button>
                    )}
                    {current > 0 && (
                        <Button style={{ margin: '0 8px' }} onClick={() => this.prev()}>
                            上一步
                        </Button>
                    )}
                </div>
            </div>
        )
    }
}